<template>
    <button class="fullscreen-btn" @click="toggleFullscreen">
        <i :class="fullscreenIcon"></i>
    </button>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class FullScreen extends Vue {

    @Prop() private container:any; // 全屏容器，默认为整个文档
    private isFullscreen = false; // 是否全屏

    /**
     * 获取全屏图标
     *
     * @returns {string} 返回全屏图标的类名
     */
    get fullscreenIcon() {
        return this.isFullscreen ? 'el-icon-close' : 'el-icon-full-screen';
    }
    /**
     * 切换全屏状态
     *
     * 根据当前的全屏状态，调用相应的浏览器全屏 API 切换全屏或退出全屏，并更新全屏状态标志位和显示相应的提示信息。
     */
    toggleFullscreen() {

          if (!this.isFullscreen) {
            const requestMethod = this.container.requestFullscreen || 
                                this.container.webkitRequestFullscreen || 
                                this.container.mozRequestFullScreen || 
                                this.container.msRequestFullscreen;
            
            if (requestMethod) {
              requestMethod.call(this.container);
              this.isFullscreen = true;
              this.$message.success('进入全屏模式');
            }
          } else {
             // 使用类型断言解决 TypeScript 类型检查问题
            const doc = document as any;
            const exitMethod = doc.exitFullscreen || 
                          doc.webkitExitFullscreen || 
                          doc.mozCancelFullScreen || 
                          doc.msExitFullscreen;
        
            if (exitMethod) {
              exitMethod.call(document);
              this.isFullscreen = false;
              this.$message.info('退出全屏模式');
            }
          }
        }
}
</script>
<style scoped>
.fullscreen-btn {
    position: absolute;
    z-index: 1000;
    right: 0px;
    top: 0px;
    width: 20px;
    height: 20px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #1a2a6c;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.fullscreen-btn:hover {
    border-color: #1a2a6c;
    color: #1a2a6c;
    background: #e6f7ff;
}
</style>